<template>
  <div class="member-reports-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">📊 会员报表中心</span>
          <div class="header-actions">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              size="small"
            />
            <el-button type="primary" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button type="success" @click="handleExport">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>
      </template>

      <!-- 报表类型选择 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="概览报表" name="overview">
          <MemberOverviewReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="消费报表" name="consumption">
          <MemberConsumptionReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="增长报表" name="growth">
          <MemberGrowthReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="积分报表" name="points">
          <MemberPointsReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="储值报表" name="balance">
          <MemberBalanceReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="流失报表" name="churn">
          <MemberChurnReport :date-range="dateRange" />
        </el-tab-pane>
        <el-tab-pane label="等级分布" name="level">
          <MemberLevelReport :date-range="dateRange" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Download } from '@element-plus/icons-vue'
import MemberOverviewReport from './reports/OverviewReport.vue'
import MemberConsumptionReport from './reports/ConsumptionReport.vue'
import MemberGrowthReport from './reports/GrowthReport.vue'
import MemberPointsReport from './reports/PointsReport.vue'
import MemberBalanceReport from './reports/BalanceReport.vue'
import MemberChurnReport from './reports/ChurnReport.vue'
import MemberLevelReport from './reports/LevelReport.vue'

const activeTab = ref('overview')
const dateRange = ref([])

const handleTabChange = () => {
  console.log('切换到:', activeTab.value)
}

const handleRefresh = () => {
  ElMessage.success('报表数据已刷新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.member-reports-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>

